{include file='common/head'}
<style>
    .layui-breadcrumb {
        margin-bottom: 10px;
    }
</style>
<script>
    document.title = "文章分类 | {:config('system.base.title')} "
</script>
<link rel="stylesheet" href="__css__/index/category/index.css">
<div class="layout">
    <span class="layui-breadcrumb">
        <a href="{:url('/index/index/index')}">首页</a>
        <a><cite>文章分类</cite></a>
    </span>
    {if count($followCate)}
        <div class="nav-category">
            <div class="cate-head">
                <p class="category-title">我的关注</p>
                <button type="button" class="show-btn"> <i class="layui-icon layui-icon-subtraction"></i></button>
            </div>
            <div class="layui-row cate-two">
                {foreach $followCate as $k}
                <a href="{:url('/index/category/detail',['cid' => $k.id])}">
                    <div class="layui-col-xs4  child-ctn">
                        <img class="intro-category" src="{$k.img_path|default='__IMG__/other/no-img.jpg'}" alt=""
                            class="category-img">
                        <br>
                        <p class="c-title layui-font-black">
                            <span>{$k.category} <span class="layui-font-orange">({$k.other.todayNum})</span></span>
                            <span class="layui-font-blue">主题数：{$k.other.total}</span>
                        </p>
                    </div>
                </a>
                {/foreach}
            </div>
        </div>
    {/if}
    {volist name="list" id="cate"}
    <div class="nav-category">
        <div class="cate-head">
            <p class="category-title"> {$cate.category}</p>
            <button type="button" class="show-btn"> <i class="layui-icon layui-icon-subtraction"></i></button>
        </div>
        {if $cate.child}
        <div class="layui-row cate-two">
            {foreach $cate.child as $k}
            <a href="{:url('/index/category/detail',['cid' => $k.id])}">
                <div class="layui-col-xs4  child-ctn">
                    <img class="intro-category" src="{$k.img_path|default='__IMG__/other/no-img.jpg'}" alt=""
                        class="category-img">
                    <br>
                    <p class="c-title layui-font-black">
                        <span>{$k.category} <span class="layui-font-orange">({$k.other.todayNum})</span></span>
                        <span class="layui-font-blue">主题数：{$k.other.total}</span>
                    </p>
                </div>
            </a>
            {/foreach}
        </div>
        {else/}
        <p class="no-data">什么也没有~</p>
        {/if}
    </div>
    {/volist}
</div>
{include file='common/bottom'}
<script>
    $('.show-btn').click(function () {
        const icon = $($(this).children()[0])
        if (icon.hasClass("layui-icon-addition")) {
            icon.removeClass("layui-icon-addition")
            icon.addClass('layui-icon-subtraction')
            $(this).parent().next().show()
        } else {
            icon.addClass("layui-icon-addition")
            icon.removeClass('layui-icon-subtraction')
            $(this).parent().next().hide()

        }

    })
</script>